<script setup lang="ts">
// 导入类型、组件、接口、模块
import { ref } from 'vue'

// 对话框逻辑
const status = ref(false)
defineExpose({
	status
})

// 临时的等待删除

// mock数据临时

interface Tree {
	id: number
	label: string
	children?: Tree[]
}

const defaultProps = {
	children: 'children',
	label: 'label'
}

const data: Tree[] = [
	{
		id: 1,
		label: 'Level one 1',
		children: [
			{
				id: 4,
				label: 'Level two 1-1',
				children: [
					{
						id: 9,
						label: 'Level three 1-1-1'
					},
					{
						id: 10,
						label: 'Level three 1-1-2'
					}
				]
			}
		]
	},
	{
		id: 2,
		label: 'Level one 2',
		children: [
			{
				id: 5,
				label: 'Level two 2-1'
			},
			{
				id: 6,
				label: 'Level two 2-2'
			}
		]
	},
	{
		id: 3,
		label: 'Level one 3',
		children: [
			{
				id: 7,
				label: 'Level two 3-1'
			},
			{
				id: 8,
				label: 'Level two 3-2'
			}
		]
	}
]
// 临时的等待删除
</script>

<template>
	<el-dialog v-model="status" title="角色分配权限" width="30%" :before-close="() => (status = false)">
		<!-- 内容 -->
		<el-tree ref="treeRef" :data="data" show-checkbox default-expand-all node-key="id" highlight-current :props="defaultProps" />
		<!-- 内容 -->
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="status = false">取消</el-button>
				<el-button type="primary" @click="status = false"> 立即更新 </el-button>
			</span>
		</template>
	</el-dialog>
</template>

<style lang="scss" scoped></style>
